<template>
    <div class="app-container BasicData">
        <div class="leftList">
            <li v-for="(item,index) in paramList" :key="index" :class="{'active': viewType == index}" @click="changeView(item,index)">{{item.label}}</li>
        </div>
        <div class="mainTable">
            <level-page v-if="viewType == 0"></level-page>
            <material-page v-if="viewType == 1"></material-page>
            <attr-page v-if="viewType == 2"></attr-page>
            <method-page v-if="viewType == 3"></method-page>
            <address-page v-if="viewType == 4"></address-page>
            <size-page v-if="viewType == 5"></size-page>
            <item-page v-if="viewType == 6"></item-page>
            <print-page v-if="viewType == 7"></print-page>
        </div>
        
    </div>
</template>
<script>
   import LevelPage from './components/level/index.vue'
   import MaterialPage from './components/material/index.vue'
   import AttrPage from './components/attr/index.vue'
   import MethodPage from './components/method/index.vue'
   import addressPage from './components/address/index.vue'
   import sizePage from './components/size/index.vue'
   import itemPage from './components/item/index.vue'
   import calendarPage from './components/calendar/index.vue'
   import printPage from './components/print/index.vue'

    export default {
        components: {
            LevelPage,MaterialPage,AttrPage,MethodPage,addressPage,sizePage,itemPage,calendarPage,printPage
        },
        data() {
            return {
                viewType: 0,
                paramList: [
                    {label: "物料等级",type: "level",ps: "manage:param:level",},
                    {label: "物料规格",type: "material",ps: "manage:param:mType",},
                    {label: "方法属性",type: "attr",ps: "manage:param:atrr",},
                    {label: "方法类别",type: "method", ps: "manage:param:method",},
                    {label: "送样地点",type: "address",ps: "manage:param:address",},
                    {label: "样品规模",type: "size",ps: "manage:param:size",},
                    {label: "检项名称",type: "item",ps: "manage:param:name",},
                    // {label: "年历管理",type: "cal",ps: "manage:param:cal",},
                    {label: "打印设置",type: "print",ps: "manage:param:print",}
                ],

              chooseCal:[]
            }
        },

        mounted(){
	        let self = this;
	        self.getList();
	        self.$eventBus.$on("updateCalendarList",function () {
	          	self.getList();
	        })
        },
        methods: {
            changeView(val,index){
                this.viewType = index
            },
            getList() {
	            let self = this;
	            self.tableLoading = true;
	            self.$http({
	              	url: "/drug/calendar/queryCalendarList",
	              	method: "post",
	            }).then(resp => {
		            if(resp.success) {
		                let choose = [];
		                for(let data of resp.result){
		                    let year = parseInt(data.year);
		                    let mouth = parseInt(data.mouth);
		                    let day = parseInt(data.day);
		                    choose.push([year, mouth, day])
		                }
		                self.chooseCal = choose;
		            }
	            });
            },
            openDialog(type) {
                for(let data of this.paramList) {
                    if(type == "cal") {
                        this.$eventBus.$emit("openCalendar",this.chooseCal);
                    } else if(data.type == type) {
                        data.paramData = {
                            id: ""
                        };
                    }
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
.BasicData {
    display: flex;
    height: 100%;
    .leftList {
        width: 130px;
        margin-right: 60px;
        margin-top: 105px;
        li {
            list-style: none;
            height: 35px;
            line-height: 35px;
            font-size: 12px;
            background: #dddddd;
            border: 1px solid #cccccc;
            color: #787878;
            text-align: center;
            cursor: pointer;
            margin-bottom: 10px;
            transition: all .5s;
            &.active {
                background: #34bfc6;
                border: 1px solid #34bfc6;
                color: #fff;
                position: relative;
                font-size: 14px;
                &::after {
                    content: ' ';
                    width: 0;
                    height: 0;
                    border-top: 15px solid transparent;
                    border-left: 12px solid #34bfc6;
                    border-bottom: 15px solid transparent;
                    position: absolute;
                    right: -15px;
                    top: 1px;
                }
            }
        }
    }
    
    .mainTable {
        width: calc(100% - 165px);
    }
}
</style>
